非エンジニアでもわかる！Playwrightで始める業務自動化の第一歩 - 1. 環境構築 -

1. はじめに

毎日繰り返される「目視確認」や「定型的なデータ入力」作業に疲れていませんか？
そんな時に役立つのが、Playwright です。

Playwright は、ブラウザ操作を自動化するための強力なツール。
特にバックオフィス業務においては、日常的な業務負担を軽減し、より重要な業務に時間を使えるようになります。

この記事の目的

• Playwrightが何かを知る
• Playwrightで何ができるのか理解する
• 簡単なスクリプトを実行し、自動化を体験する

2. 非エンジニアにもわかるキーワード解説

E2Eテストとは？

E2E（End-to-End）テスト とは、「システム全体を最初から最後まで通して動作確認するテスト」 のことです。

具体例：ECサイトの購入操作

1. 商品を検索する
2. 商品をカートに追加する
3. 決済画面で情報を入力する
4. 購入ボタンを押す
5. 注文完了メールが届く

E2Eテスト は、これらの一連の操作が問題なく動くかを確認する作業です。
Playwrightは、これを「自動的に」行ってくれます。

自動化の「できること」「できないこと」

できること

• 定型的な作業：毎回同じ手順を繰り返す作業
• 目視確認：特定要素の表示・レイアウトの確認
• フォーム入力：自動的にフォームにデータを入力
• スクリーンショットの取得：画面の状態を記録

できないこと

• 複雑な判断：「デザインが美しいか？」など主観的な評価
• 柔軟な対応：突発的なトラブルやエラーへの臨機応変な対応
• 初回設定：認証や複雑なセットアップは自動化が難しい

ポイント
「何でも自動化しよう」と考えるのではなく、繰り返しが多い業務 や シンプルな手順 から自動化を始めるのがおすすめです。

3. Playwrightを使う準備

Step1: Node.jsのインストール

Playwrightは Node.js という環境が必要です。
まだインストールしていない場合は、以下のリンクからLTS版をダウンロードしてください。
👉 Node.js公式サイト

Step2: Playwrightのインストール＆セットアップ

ターミナルを開き、以下のコマンドを実行します：

$ mkdir playwright-demo # 作業用ディレクトリを作る
$ cd playwright-demo
$ npm init playwright@latest
Need to install the following packages:
create-playwright@1.17.134
Ok to proceed? (y) y

> npx
> create-playwright

Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

これで準備完了です！

4. Playwrightを使った簡単な自動化スクリプト

Step3: 初めてのPlaywrightスクリプト

以下のコードを tests/example.spec.js として保存してください。

import { test } from '@playwright/test';

test('DevelopersIO check', async ({ page }) => {
  await page.goto('https://dev.classmethod.jp/');
  await page.screenshot({ path: 'dev.classmethod.jp.png' });
});

Step4: スクリプトを実行

ターミナルで次のコマンドを実行します。

$ npx playwright test

Step5: 確認

ディレクトリ内に dev.classmethod.jp.png というスクリーンショットが生成されているはずです！

5. 業務への応用例

バックオフィス業務の例

• レポート画面のスクリーンショットを定期的に取得
• フォームへの大量データ入力
• Webページの特定項目の表示確認

ポイント
小さな成功体験を積み重ねて、徐々に業務自動化の幅を広げていきましょう。

6. 学びを深めるために

• Playwright公式ドキュメント
• Node.js公式サイト

7. おわりに

Playwrightは難しいツールではなく、「できること」から少しずつ始めていけば、業務の効率化に大いに役立ちます。

小さな自動化から大きな効率化へ。
この記事がその第一歩になれば幸いです。